window.addEventListener('load', function () {
  // 模拟服务器上的传递过来的数据
  let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

    let = apinav = getEle("#APIlist");
    let = searchName = getEle("#searchName");
    let = searchInput = getEle("#searchInput");

    apinav.addEventListener("click",function(g){
      let target = g.target;

      if (target.nodeName.toLowerCase() ==="li") {
        searchName.textContent = target.textContent;

        let keyword = target.getAttribute("keyword")
        searchInput.placeholder = keyword;

        let adomes = getEleAll(".api-nav-item");

        adomes.forEach(function(li){
          li.classList.remove("api-nav-item-active")
        })
        target.classList.add("api-nav-item-active")
      }
    })
    apiTypeData.forEach(function(obj,index){
      let aDom = document.createElement("li");
      aDom.textContent = obj.name;
      aDom.className = "api-nav-item fl font10";

      if(index ===0){
        aDom.classList.add("api-nav-item-active")        
      }
      aDom.setAttribute("keyword",obj.keyword);
        if (obj.isnew) {
          aDom.style.fontWeight="bold";
        }
        apinav.appendChild(aDom);
    })
  // let sHtml = '';
  //3.遍历数据源,拼接html结构

  /*
  <li class="fl font10">
              <a href=""> 全部</a>
          </li>
  // */
  // apiTypeData.forEach(function (v) {
  //   // console.log(v); //获取到数据源中的每一条数据
  //   sHtml += `
  //       <li class="fl font10">
  //                   <a href="">${v.name}</a>
  //           </li>
  //       `

  // })
  // //查看拼接后的数据
  // // console.log(sHtml);
  // APIlist.innerHTML = sHtml;

  //-----------api 列表区域 
  //API列表区域 模拟服务器返回的数据
  let listDataArr = [
    //第一行./imgs/service01.svg
    { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imgs/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imgs/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imgs/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imgs/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imgs/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imgs/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imgs/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imgs/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imgs/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "./imgs/API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "./imgs/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "./imgs/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "./imgs/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "./imgs/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  ]
  //2.定义变量保存拼接结构
  /* 
  
    格式:
      <li class="list-item fl">
      <span class="special">企业专用</span>
      <div class="content txt-center">
      <img src="./imgs/API_01.jpg" alt="">
      <p class="api-name">2021出行防疫政策指南</p>
      <p class="api-price">免费</p>
      </div>
      <a class="apply-data txt-center">申请数据</a>
      </li>
  */

  // let api_listHtml = '';
  //3.遍历数据源,拼接html结构
  // listDataArr.forEach(function (v) {
  //   // console.log(v); //获取到数据源中的每一条数据

  //   api_listHtml += `
  //               <li class="list-item fl">
  //               <span class="special">企业专用</span>
  //               <div class="content txt-center">
  //                   <img src="${v.img}" alt="">
  //                   <p class="api-name">${v.name}</p>
  //                   <p class="api-price">${v.price}</p>
  //                   </div>
  //                   <a class="apply-data txt-center">申请数据</a>
  //                   </li>
  //               `
  // })
  // //查看拼接后的数据
  // // console.log(sHtml);
  // apiContent.innerHTML = api_listHtml;


  //获取api列表的容器
  const apiContent = getEle("#apiContent");
  //遍历数组，动态生成li标签，并且添加到列表容器
  showData(listDataArr);//页面加载时就执行一次
  /* 把遍历数组生成li标签封装为一个函数 */
  function showData(arr) {
    arr.forEach(function (obj) {
      // console.log(obj);
      let newLi = document.createElement("li");
      //设置样式
      newLi.classList.add("list-item", "fl");
      // console.log(newLi);

      newLi.innerHTML = `
                      <span class="special ${obj.isSpecial ? "on" : "off"}">企业专用</span>
                      <div class="content txt-center">
                      <a href="./apidetails.html">
                      <img src="${obj.img}" alt="">
                      <p class="api-name">${obj.name}</p>
                      <p class="api-price ${obj.price == "免费" ? "color-green" : "color-red"}">${obj.price}</p>
                      </a>
                      </div>
                      <a class="apply-data txt-center">申请数据</a>
                      `
      //把li标签添加到容器中
      apiContent.appendChild(newLi)
    })
  }

  //end service
})